.sonar {
	display: block;
	position: relative;
	top: 0;
	height: 400px;
	width: 400px;
	border-radius: 50%;
	overflow: hidden;
	left: 0;
	margin: 0 auto
}

.circle1 {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	border: solid 2px rgba(118, 153, 15, .8);
	position: absolute;
	display: block;
	top: 155px;
	left: 155px
}

.circle2 {
	width: 170px;
	height: 170px;
	border-radius: 50%;
	border: solid 2px rgba(118, 153, 15, .8);
	position: absolute;
	display: block;
	top: 115px;
	left: 115px
}

.circle3 {
	width: 250px;
	height: 250px;
	border-radius: 50%;
	border: solid 2px rgba(118, 153, 15, .8);
	position: absolute;
	display: block;
	top: 75px;
	left: 75px
}

.circle4 {
	width: 330px;
	height: 330px;
	border-radius: 50%;
	border: solid 2px rgba(118, 153, 15, .8);
	position: absolute;
	display: block;
	top: 35px;
	left: 35px
}

.circle5 {
	width: 408px;
	height: 408px;
	border-radius: 50%;
	border: dotted 8px rgba(118, 153, 15, .8);
	position: absolute;
	display: block;
	left: -4px;
	top: -4px;
	z-index: 2
}

.axis3,
.axis4,
.axis5,
.axis6,
.axis7,
.axis8,
.axis9,
.axis10 {
	width: 1px;
	height: 400px;
	position: absolute;
	top: 10%;
	background: #9b9b9b
}

.axis11,
.axis12,
.axis13,
.axis14,
.axis15,
.axis16,
.axis17,
.axis18 {
	position: absolute;
	width: 400px;
	height: 1px;
	top: 10%;
	background: #9b9b9b
}

.axis1 {
	z-index: 2;
	width: 3px;
	height: 400px;
	position: absolute;
	top: 0;
	background: rgba(118, 153, 15, .8);
	-webkit-transform: translate(200px, 0);
	transform: translate(200px, 0)
}

.axis2 {
	z-index: 2;
	width: 400px;
	height: 3px;
	position: absolute;
	top: 0;
	background: rgba(118, 153, 15, .8);
	-webkit-transform: translate(000px, 200px);
	transform: translate(000px, 200px)
}

.axis3 {
	-webkit-transform: translate(40px, -40px);
	transform: translate(40px, -40px)
}

.axis4 {
	-webkit-transform: translate(360px, -40px);
	transform: translate(360px, -40px)
}

.axis5 {
	-webkit-transform: translate(80px, -40px);
	transform: translate(80px, -40px)
}

.axis6 {
	-webkit-transform: translate(240px, -40px);
	transform: translate(240px, -40px)
}

.axis7 {
	-webkit-transform: translate(120px, -40px);
	transform: translate(120px, -40px)
}

.axis8 {
	-webkit-transform: translate(280px, -40px);
	transform: translate(280px, -40px)
}

.axis9 {
	-webkit-transform: translate(160px, -40px);
	transform: translate(160px, -40px)
}

.axis10 {
	-webkit-transform: translate(320px, -40px);
	transform: translate(320px, -40px)
}

.axis11 {
	-webkit-transform: translate(0, 40px);
	transform: translate(0, 40px)
}

.axis12 {
	-webkit-transform: translate(0, 80px);
	transform: translate(0, 80px)
}

.axis13 {
	-webkit-transform: translate(0, 120px);
	transform: translate(0, 120px)
}

.axis14 {
	-webkit-transform: translate(0, 200px);
	transform: translate(0, 200px)
}

.axis15 {
	-webkit-transform: translate(0, 240px);
	transform: translate(0, 240px)
}

.axis16 {
	-webkit-transform: translate(0, 280px);
	transform: translate(0, 280px)
}

.axis17 {
	-webkit-transform: translate(0, 320px);
	transform: translate(0, 320px)
}

.axis18 {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0)
}

.sonar-AI {
	position: absolute;
	width: 200px;
	height: 200px;
	border-right: 2px solid rgba(118, 153, 15, .7);
	background: -webkit-linear-gradient(right bottom, rgba(67, 255, 78, .3) 0, rgba(118, 153, 15, 0) 90%);
	background: linear-gradient(right bottom, rgba(67, 255, 78, .3) 0, rgba(118, 153, 15, 0) 90%);
	-webkit-transform-origin: right bottom;
	transform-origin: right bottom;
	-webkit-animation-timing-function: linear;
	animation-timing-function: linear;
	-webkit-animation-duration: 4s;
	animation-duration: 4s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: AI;
	animation-name: AI
}

.circular {
	border-radius: 50%;
	position: absolute;
	left: 50%;
	top: 200px;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%)
}

.sonar-CIR {
	border: 3px solid #43ff4e;
	box-shadow: inset 0 0 100px #0ccb07;
	-webkit-animation: SONAR 2s ease-in infinite;
	animation: SONAR 2s ease-in infinite
}

.blip {
	position: absolute;
	width: 10px;
	height: 10px;
	border-radius: 2em;
	background-color: #76990f;
	box-shadow: 0 0 5px white;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	opacity: 0;
	-ms-filter: "alpha(opacity=0)";
	-webkit-animation-timing-function: ease;
	animation-timing-function: ease;
	-webkit-animation-duration: 4s;
	animation-duration: 4s;
	-webkit-animation-fill-mode: none;
	animation-fill-mode: none;
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-name: blipper;
	animation-name: blipper
}

.blip-1 {
	bottom: 200px;
	left: 240px;
	-webkit-animation-delay: .1s;
	animation-delay: .1s
}

.blip-2 {
	bottom: 186px;
	left: 135px;
	-webkit-animation-delay: 1.5s;
	animation-delay: 1.5s
}

.blip-3 {
	bottom: 105px;
	left: 312px;
	-webkit-animation-delay: 1.25s;
	animation-delay: 1.25s
}

.blip-4 {
	top: 80px;
	right: 70px;
	-webkit-animation-delay: 3.1s;
	animation-delay: 3.1s
}

@-webkit-keyframes SONAR {
	from {
		opacity: .8;
		-ms-filter: "alpha(opacity=80)";
		width: 20px;
		height: 20px
	}

	to {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)";
		width: 400px;
		height: 400px
	}
}

@keyframes SONAR {
	from {
		opacity: .8;
		-ms-filter: "alpha(opacity=80)";
		width: 20px;
		height: 20px
	}

	to {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)";
		width: 400px;
		height: 400px
	}
}

@-webkit-keyframes AI {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@keyframes AI {
	from {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg)
	}

	to {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg)
	}
}

@-webkit-keyframes blipper {
	0% {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)"
	}

	35% {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)"
	}

	50% {
		opacity: 1;
		-ms-filter: "alpha(opacity=100)"
	}

	100% {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)"
	}
}

@keyframes blipper {
	0% {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)"
	}

	35% {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)"
	}

	50% {
		opacity: 1;
		-ms-filter: "alpha(opacity=100)"
	}

	100% {
		opacity: 0;
		-ms-filter: "alpha(opacity=0)"
	}
}
